<template>
  <div class="files-container">
    <div class="files-left">
      <div class="files-header">
        <span>{{ filesName }}</span>
        <Popover placement="bottom" v-model="visible">
          <div class="add-files">
            <div>
              <li @click="addClick('1')">
                <span class="icon iconfont icon-wendang"></span>
                <span class="text">文档</span>
              </li>
              <li @click="addClick('2')">
                <span class="icon iconfont icon-liuchengtu"></span>
                <span class="text">脑图</span>
              </li>
              <li @click="addClick('3')">
                <span class="icon iconfont icon-biaoge"></span>
                <span class="text">表格</span>
              </li>
            </div>
          </div>
          <span slot="reference" class="add iconfont icon-icon-test"></span>
          <!-- <span>新增文件夹</span> -->
        </Popover>
      </div>
      <div class="files-content">
        <div class="files-null" v-if="filesLength <= 0">
          <span class="iconfont icon-folder-s"></span>
          <p>暂无文件</p>
        </div>
        <li
          @click="fileClick(item)"
          v-for="item in files"
          :key="item.id"
          class="files-list"
        >
          <span class="icon iconfont icon-wendang" v-if="item.type == 1"></span>
          <span
            class="icon iconfont icon-liuchengtu"
            v-if="item.type == 2"
          ></span>
          <span class="icon iconfont icon-biaoge" v-if="item.type == 3"></span>
          <span class="name">{{ item.name }}</span>
          <span
            class="tool iconfont icon-shanchu"
            @click="deleteClick($event, item)"
          ></span>
        </li>
      </div>
      <div class="files-footer">
        <Pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="27"
          @prev-click="prevClick"
          @next-click="nextClick"
          @current-change="currentChange"
        ></Pagination>
      </div>
    </div>
    <div class="files-right">
      <span>文件夹</span>
      <ul>
        <li
          v-for="item in folderList"
          :key="item.id"
          :class="{ active: filderId == item.id }"
          @click="folderClick(item)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { findFiles, findFilesAllCount, deleteFile } from "@/api/files.js";
import { findFolderAllCount } from "@/api/folder";
import el from "element-ui";
export default {
  components: {
    Pagination: el.Pagination,
    Popover: el.Popover,
  },
  data() {
    return {
      files: [], //文件列表
      total: 0,
      folderList: [], //文件夹列表
      filesName: localStorage.getItem("folderName"),
      visible: false,
      filesLength: 0,
      filderId: null,
    };
  },
  methods: {
    init() {
      this.filderId = localStorage.getItem("filderId");
      findFiles(1, 27, this.filderId).then((result) => {
        this.files = result;
        this.filesLength = this.files.length;
      });
      findFilesAllCount(this.filderId).then((result) => {
        this.total = result.length;
      });
      findFolderAllCount().then((result) => {
        this.folderList = result;
      });
    },
    // 分页请求
    findFilesPage(val) {
      findFiles(val, 27, this.filderId).then((result) => {
        this.files = result;
        this.filesLength = this.files.length;
      });
    },
    prevClick(val) {
      this.findFilesPage(val);
    },
    nextClick(val) {
      this.findFilesPage(val);
    },
    currentChange(val) {
      this.findFilesPage(val);
    },
    // 右侧文件夹列表点击事件
    folderClick(item) {
      this.filesName = item.name;
      this.filderId = item.id;
      findFiles(1, 27, item.id).then((result) => {
        this.files = result;
        this.filesLength = this.files.length;
      });
    },
    //添加文件
    addFiles() {
      this.visible = true;
    },
    // 跳转路由函数
    jumpRoute() {
      this.$router.push(`/file`);
    },
    //添加文件跳转
    addClick(documentType) {
      localStorage.setItem("jumpType", "add");
      localStorage.setItem("documentType", documentType);
      localStorage.setItem("fileName", "");
      localStorage.setItem("fileId", "");
      localStorage.setItem("folderName", this.filesName);
      localStorage.setItem("filderId", this.filderId);
      this.jumpRoute();
    },
    // 查看文件跳转
    fileClick(item) {
      localStorage.setItem("jumpType", "renew");
      localStorage.setItem("documentType", item.type);
      localStorage.setItem("fileName", item.name);
      localStorage.setItem("fileId", item.id);
      localStorage.setItem("folderName", this.filesName);
      localStorage.setItem("filderId", this.filderId);
      this.jumpRoute();
    },
    // 删除单个文件
    deleteClick(e, item) {
      e.stopPropagation();
      this.$confirm("是否删除此项?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (item.isDelete) {
            this.$message({
              showClose: true,
              message: "您没有权限删除!",
              type: "warning",
            });
          } else {
            deleteFile(item.id).then((result) => {
              if (result > 0) {
                this.$message({
                  showClose: true,
                  message: "删除成功!",
                  type: "success",
                });
                this.init();
              }
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="less" scoped>
@import "./style.less";
</style>